<template>
    <div>
      <Modal :mask-closable="false" :title="title" width="800" v-model="modalState" @on-cancel="confirm" class="modal-content-layout">
        <div class="content list-layout mt16" style="padding: 0 !important;box-shadow: none">
          <div class="btns clear">
            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button  v-if="showExport"  @click="exportTemplateClick">{{$t('common.batchExport')}}</Button>
          </div>
          <div class="tableContent"><Table :columns="columns" :data="data" height="500"></Table></div>
          <div class="pageWrap mt16 t-r">
            <pageLeftTitle :total="pageParams.total" />
            <Page :total="pageParams.total"
                  :page-size="pageParams.pageSize" :current="pageParams.pageNum" show-total
                  @on-change="changePageNum" @on-page-size-change="pageSizeChange" show-sizer/>
          </div>
        </div>
        <div slot="footer">
          <Button type="primary" @click="confirm">{{$t('maintenance.Confirmed')}}</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
    import fileDownload from "js-file-download";
    // import {Modal, Table, Page} from 'iview';

    export default {
        name: 'number',
        // components: {
            // Modal, Table, Page
        // },
        data() {
            return {
                modalState: false,
                showExport: false,
                title: '',
                pageParams: {
                    pageNum: 1,
                    total: 0,
                    pageSize: 10
                },
                data: [],
                docId: '',
                state: null
            }
        },
        computed: {
            columns() {
                const arr = [
                    {
                        title: '操作人工号',
                        align: 'center',
                        key: 'empno'
                    },
                    {
                        title: '操作人姓名',
                        align: 'center',
                        key: 'operatorBy'
                    },
                ]
                if (this.state === 3) {
                    const list1 = [
                    {
                        title: '开始学习时间',
                        align: 'center',
                        key: 'learningStartTime'
                    },
                    {
                        title: '结束学习时间',
                        align: 'center',
                        key: 'learningEndTime'
                    },
                    {
                        title: '学习时长（分钟）',
                        align: 'center',
                        key: 'studyDuration'
                    }]
                    arr.push(...list1)
                } else {
                    const list2 = [
                    {
                        title: '操作时间',
                        align: 'center',
                        key: 'operationTime'
                    },
                    {
                        title: '操作类型',
                        align: 'center',
                        key: 'operationTypeStr'
                    }]
                    arr.push(...list2)
                }
                return arr
            }
        },
        methods: {
            show(id, state, showExport = false) {
                this.modalState = true
                this.docId = id
                this.state = state
                this.title = state === 1 ? '浏览次数' : state === 2 ? '下载次数' : '学习次数'
                this.showExport = showExport
                this.getList();
            },
            getList() {
                this.axios({
                    method: "post",
                    url: "/dms/operationRecord/list",
                    data: {
                        pageNum: this.pageParams.pageNum,
                        pageSize: this.pageParams.pageSize,
                        documentAttachmentId: this.docId,
                        operationType: this.state
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.data = res.data.list;
                        this.pageParams.total = res.data.total;
                    } else {
                        this.$Message.error(({content: res.msg, duration: 6, closable: true}));
                    }
                });
            },
            /*分页*/
            changePageNum(pageNum) {
                this.pageParams.pageNum = pageNum;
                this.getList();
            },
            pageSizeChange(pageSize) {
                this.pageParams.pageNum = 1;
                this.pageParams.pageSize = pageSize;
                this.getList();
            },
            confirm() {
                this.modalState = false;
            },
            //导出
            exportTemplateClick() {
                let params = {
                    documentAttachmentId: this.docId,
                    operationType: 3
                };
                const filName = "学习次数";
                this.axios({
                    method: "post",
                    url: "/dms/operationRecord/export",
                    responseType: "blob",
                    data: params,
                }).then((res) => {
                    fileDownload(res, filName + ".xlsx");
                });
            },
        }
    }
</script>
